<template>
    <vue-simplebar>
        <div class="p-5 text-center" v-if="gameStatus != 'dle'">
            <component-page-loading :status="gameStatus" @reload="getGames"></component-page-loading>
        </div>
        <div class="app-option-container" v-else>
            <div v-for="(group, key) in games" :key="key">
                <h1 class="text-xl m-5 mb-0 mt-4 text-red-400">{{ toUpper(key) }}</h1>
                <div class="game-list">
                    <router-link class="game-list-item" v-for="(game, index) in group" :key="index" :to="gameRoute(game)">
                        <div class="game-card">
                            <div class="game-card-body">
                                <el-image fit="cover" :src="`/img/game/${game.code}.png`">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <div class="pt-4 text-center w-full truncate"
                                     :title="$te(`game.setting.game.games.${game.code}.label`) ? $t(`game.setting.game.games.${game.code}.label`) : game.name">
                                    <component-page-games :game-code="game.code" :game-name="game.name"></component-page-games>
                                </div>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
    </vue-simplebar>
</template>

<script>
export default {
    data() {
        return {
            gameStatus: 'dle',
            games: {},
            gameBasic: [
                'slobskg', 'slobloodsucker', 'slofruitrush', 'slosuper777',
                'slocandy', 'slopirate', 'slomermaid', 'slokingofspeed',
                'slopharaohcoins', 'slosamuraipreach', 'slothechickenfarm',
                'slospacetravel', 'slobxxb', 'sloadventureisland', 'slothebookofcarl',
                'slomoneytrain', 'slowitchelf', 'slotherichman', 'slothemagicians',
                'slowrathofolympus','slogoddess','sloworldcupchampions',
                'slowanteddeadorawild', 'slopokerlife', 'slocockfighting',
                'slomahjong', 'sloanimalparty', 'slomyantemple', 'slodragonfortune',
                'sloella', 'sloiceage', 'slodragonquest', 'slowestworld', 'sloaladdin',
                'sloraveclub', 'slofacaishen', 'slodog', 'slosweetmelee', 'slozeus',
                'sloroulette', 'slocaptainpenguin', 'sloluckyjoker',
            ],
            gameElementary: ['slostarburst', 'slohockey'],
            gameFishing: ['fishjackpot'],
            gameTiger: ['sloparrot' , 'slocaptainsboundy' , 'slogenies3wishes' , 'slossff' , 'slosbjn' , 'slorabbit', 'slogateofolympus', 'slosjnvw'],
        }
    },
    created() {
        this.getGames();
    },
    methods: {
        toUpper(key) {
            return _.toUpper(key);
        },
        gameRoute(game) {
            if (this.gameBasic.indexOf(game.code) >= 0) {
                return {name: 'game.setting.config.basic', params: {game: game.code}};
            }
            if (this.gameElementary.indexOf(game.code) >= 0) {
                return {name: 'game.setting.config.elementary', params: {game: game.code}};
            }
            if (this.gameFishing.indexOf(game.code) >= 0) {
                return {name: 'game.setting.config.fishing', params: {game: game.code}};
            }
            if (this.gameTiger.indexOf(game.code) >= 0) {
                return {name: 'game.setting.config.tiger', params: {game: game.code}};
            }
            return {name: `game.setting.config.${game.code}`};
        },
        getGames() {
            this.gameStatus = 'loading';
            axios.get('/common/getGameList').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.games = response.data.resp_data;
                    this.gameStatus = _.isEmpty(this.games) ? 'nodata' : 'dle';
                } else {
                    this.gameStatus = 'error';
                }
            })
        },
    }
}
</script>

<style scoped>

</style>
